<!DOCTYPE html><html class=split lang=en-US-x-hixie><script src=../link-fixup.js defer=""></script>
<!-- Mirrored from html.spec.whatwg.org/multipage/image-maps.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 10 Sep 2025 08:35:37 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
<meta charset=utf-8><meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name=viewport><title>HTML Standard</title><meta content=#3c790a name=theme-color><meta content="light dark" name=color-scheme><link rel=stylesheet href=../../resources.whatwg.org/standard-shared-with-dev.css crossorigin=""><link rel=stylesheet href=../../resources.whatwg.org/standard.css crossorigin=""><link rel=stylesheet href=../../resources.whatwg.org/spec.css crossorigin=""><link rel=icon href=https://resources.whatwg.org/logo.svg crossorigin=""><link rel=stylesheet href=../styles.css crossorigin=""><script>
   function toggleStatus(div) {
     div.parentNode.classList.toggle('wrapped');
   }
   function setLinkFragment(link) {
     link.hash = location.hash;
   }
  </script><body>
  
  <script defer="" crossorigin="" src=../html-dfn.js></script>
  
  <header id=head class="head with-buttons">
   <a href=https://whatwg.org/ class=logo><img width=100 alt=WHATWG crossorigin="" class=darkmode-aware src=https://resources.whatwg.org/logo.svg height=100></a>
   <hgroup><h1 class=allcaps>HTML</h1><p id=living-standard>Living Standard — Last Updated <span class=pubdate>10 September 2025</span></hgroup>
   
   

   
  </header>

  

  

  

  
  

  
  

  

  <nav><a href=media.html>← 4.8.8 The video element</a> — <a href=index.html>Table of Contents</a> — <a href=embedded-content-other.html>4.8.15 MathML →</a></nav><ol class=toc><li id=toc-semantics><ol><li><ol><li><a href=image-maps.html#the-map-element><span class=secno>4.8.12</span> The <code>map</code> element</a><li><a href=image-maps.html#the-area-element><span class=secno>4.8.13</span> The <code>area</code> element</a><li><a href=image-maps.html#image-maps><span class=secno>4.8.14</span> Image maps</a><ol><li><a href=image-maps.html#authoring><span class=secno>4.8.14.1</span> Authoring</a><li><a href=image-maps.html#image-map-processing-model><span class=secno>4.8.14.2</span> Processing model</a></ol></ol></ol></ol><h4 id=the-map-element><span class=secno>4.8.12</span> The <dfn data-dfn-type=element><code>map</code></dfn> element<a href=#the-map-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map title="The <map> HTML element is used with <area> elements to define an image map (a clickable link area).">Element/map</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>4+</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMapElement title="The HTMLMapElement interface provides special properties and methods (beyond those of the regular object HTMLElement interface it also has available to it by inheritance) for manipulating the layout and presentation of map elements.">HTMLMapElement</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dl class=element><dt><a href=dom.html#concept-element-categories id=the-map-element:concept-element-categories>Categories</a>:<dd><a id=the-map-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-map-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a id=the-map-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-map-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-map-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-map-element:concept-element-content-model>Content model</a>:<dd><a id=the-map-element:transparent href=dom.html#transparent>Transparent</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-map-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-map-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-map-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-map-element:attr-map-name><a href=#attr-map-name>name</a></code> —  Name of <a href=#image-map id=the-map-element:image-map>image map</a> to <a href=dom.html#referenced id=the-map-element:referenced>reference</a> from the <code id=the-map-element:attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code> attribute
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-map-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-map>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-map>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-map-element:concept-element-dom>DOM interface</a>:<dd>
    <pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='htmlmapelement' data-dfn-type='interface'><c- g>HTMLMapElement</c-></dfn> : <a id='the-map-element:htmlelement' href='dom.html#htmlelement'><c- n>HTMLElement</c-></a> {
  [<a id='the-map-element:htmlconstructor' href='dom.html#htmlconstructor'><c- g>HTMLConstructor</c-></a>] <c- g>constructor</c->();

  [<a id='the-map-element:cereactions' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-map-element:xattr-reflect'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLMapElement' id='dom-map-name' data-dfn-type='attribute'><c- g>name</c-></dfn>;
  [<c- g>SameObject</c->] <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-map-element:htmlcollection' href='https://dom.spec.whatwg.org/#interface-htmlcollection' data-x-internal='htmlcollection'><c- n>HTMLCollection</c-></a> <a href='#dom-map-areas' id='the-map-element:dom-map-areas'><c- g>areas</c-></a>;
};</code></pre>
   </dl>

  <p>The <code id=the-map-element:the-map-element><a href=#the-map-element>map</a></code> element, in conjunction with an <code id=the-map-element:the-img-element><a href=embedded-content.html#the-img-element>img</a></code> element and any
  <code id=the-map-element:the-area-element><a href=#the-area-element>area</a></code> element descendants, defines an <a href=#image-map id=the-map-element:image-map-2>image map</a>. The element
  <a id=the-map-element:represents href=dom.html#represents>represents</a> its children.</p>

  <p>The <dfn data-dfn-for=map id=attr-map-name data-dfn-type=element-attr><code>name</code></dfn> attribute gives
  the map a name so that it can be <a id=the-map-element:referenced-2 href=dom.html#referenced>referenced</a>. The attribute must be present and must
  have a non-empty value with no <a id=the-map-element:space-characters href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII whitespace</a>. The value of the <code id=the-map-element:attr-map-name-2><a href=#attr-map-name>name</a></code> attribute must not be equal to the value of the <code id=the-map-element:attr-map-name-3><a href=#attr-map-name>name</a></code> attribute of another <code id=the-map-element:the-map-element-2><a href=#the-map-element>map</a></code> element in the same
  <a id=the-map-element:tree href=https://dom.spec.whatwg.org/#concept-tree data-x-internal=tree>tree</a>. If the <code id=the-map-element:the-id-attribute><a href=dom.html#the-id-attribute>id</a></code> attribute is also specified, both
  attributes must have the same value.</p>

  <dl class=domintro><dt><code><var>map</var>.<a href=#dom-map-areas id=dom-map-areas-dev>areas</a></code><dd>
    <p>Returns an <code id=the-map-element:htmlcollection-2><a data-x-internal=htmlcollection href=https://dom.spec.whatwg.org/#interface-htmlcollection>HTMLCollection</a></code> of the <code id=the-map-element:the-area-element-2><a href=#the-area-element>area</a></code> elements in the
    <code id=the-map-element:the-map-element-3><a href=#the-map-element>map</a></code>.</p>
   </dl>

  

  <p>The <dfn data-dfn-for=HTMLMapElement id=dom-map-areas data-dfn-type=attribute><code>areas</code></dfn>
  attribute must return an <code id=the-map-element:htmlcollection-3><a data-x-internal=htmlcollection href=https://dom.spec.whatwg.org/#interface-htmlcollection>HTMLCollection</a></code> rooted at the <code id=the-map-element:the-map-element-4><a href=#the-map-element>map</a></code> element, whose
  filter matches only <code id=the-map-element:the-area-element-3><a href=#the-area-element>area</a></code> elements.</p>

  

  <div class=example>

   <p>Image maps can be defined in conjunction with other content on the page, to ease maintenance.
   This example is of a page with an image map at the top of the page and a corresponding set of
   text links at the bottom.</p>

   <pre><code class='html'><c- cp>&lt;!DOCTYPE HTML&gt;</c->
<c- p>&lt;</c-><c- f>HTML</c-> <c- e>LANG</c-><c- o>=</c-><c- s>&quot;EN&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>TITLE</c-><c- p>&gt;</c->Babies™: Toys<c- p>&lt;/</c-><c- f>TITLE</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>HEADER</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>H1</c-><c- p>&gt;</c->Toys<c- p>&lt;/</c-><c- f>H1</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>IMG</c-> <c- e>SRC</c-><c- o>=</c-><c- s>&quot;/images/menu.gif&quot;</c->
      <c- e>ALT</c-><c- o>=</c-><c- s>&quot;Babies™ navigation menu. Select a department to go to its page.&quot;</c->
      <c- e>USEMAP</c-><c- o>=</c-><c- s>&quot;#NAV&quot;</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>HEADER</c-><c- p>&gt;</c->
 ...
<c- p>&lt;</c-><c- f>FOOTER</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>MAP</c-> <c- e>NAME</c-><c- o>=</c-><c- s>&quot;NAV&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>P</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>A</c-> <c- e>HREF</c-><c- o>=</c-><c- s>&quot;/clothes/&quot;</c-><c- p>&gt;</c->Clothes<c- p>&lt;/</c-><c- f>A</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>AREA</c-> <c- e>ALT</c-><c- o>=</c-><c- s>&quot;Clothes&quot;</c-> <c- e>COORDS</c-><c- o>=</c-><c- s>&quot;0,0,100,50&quot;</c-> <c- e>HREF</c-><c- o>=</c-><c- s>&quot;/clothes/&quot;</c-><c- p>&gt;</c-> |
   <c- p>&lt;</c-><c- f>A</c-> <c- e>HREF</c-><c- o>=</c-><c- s>&quot;/toys/&quot;</c-><c- p>&gt;</c->Toys<c- p>&lt;/</c-><c- f>A</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>AREA</c-> <c- e>ALT</c-><c- o>=</c-><c- s>&quot;Toys&quot;</c-> <c- e>COORDS</c-><c- o>=</c-><c- s>&quot;100,0,200,50&quot;</c-> <c- e>HREF</c-><c- o>=</c-><c- s>&quot;/toys/&quot;</c-><c- p>&gt;</c-> |
   <c- p>&lt;</c-><c- f>A</c-> <c- e>HREF</c-><c- o>=</c-><c- s>&quot;/food/&quot;</c-><c- p>&gt;</c->Food<c- p>&lt;/</c-><c- f>A</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>AREA</c-> <c- e>ALT</c-><c- o>=</c-><c- s>&quot;Food&quot;</c-> <c- e>COORDS</c-><c- o>=</c-><c- s>&quot;200,0,300,50&quot;</c-> <c- e>HREF</c-><c- o>=</c-><c- s>&quot;/food/&quot;</c-><c- p>&gt;</c-> |
   <c- p>&lt;</c-><c- f>A</c-> <c- e>HREF</c-><c- o>=</c-><c- s>&quot;/books/&quot;</c-><c- p>&gt;</c->Books<c- p>&lt;/</c-><c- f>A</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>AREA</c-> <c- e>ALT</c-><c- o>=</c-><c- s>&quot;Books&quot;</c-> <c- e>COORDS</c-><c- o>=</c-><c- s>&quot;300,0,400,50&quot;</c-> <c- e>HREF</c-><c- o>=</c-><c- s>&quot;/books/&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>P</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>MAP</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>FOOTER</c-><c- p>&gt;</c-></code></pre>

  </div>



  <h4 id=the-area-element><span class=secno>4.8.13</span> The <dfn data-dfn-type=element><code>area</code></dfn> element<a href=#the-area-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area title="The <area> HTML element defines an area inside an image map that has predefined clickable areas. An image map allows geometric areas on an image to be associated with hypertext links.">Element/area</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLAreaElement title="The HTMLAreaElement interface provides special properties and methods (beyond those of the regular object HTMLElement interface it also has available to it by inheritance) for manipulating the layout and presentation of <area> elements.">HTMLAreaElement</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLAreaElement/rel title="The HTMLAreaElement.rel property reflects the rel attribute. It is a string containing a space-separated list of link types indicating the relationship between the resource represented by the <area> element and the current document.">HTMLAreaElement/rel</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>30+</span></span><span class="safari yes"><span>Safari</span><span>9+</span></span><span class="chrome yes"><span>Chrome</span><span>54+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>11</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLAreaElement/relList title="The HTMLAreaElement.relList read-only property reflects the rel attribute. It is a live DOMTokenList containing the set of link types indicating the relationship between the resource represented by the <area> element and the current document.">HTMLAreaElement/relList</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>30+</span></span><span class="safari yes"><span>Safari</span><span>9+</span></span><span class="chrome yes"><span>Chrome</span><span>65+</span></span><hr><span class="opera yes"><span>Opera</span><span>41+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>18</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>41+</span></span></div></div></div><dl class=element><dt><a href=dom.html#concept-element-categories id=the-area-element:concept-element-categories>Categories</a>:<dd><a id=the-area-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-area-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dt><a href=dom.html#concept-element-contexts id=the-area-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-area-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected, but only if there is a <code id=the-area-element:the-map-element><a href=#the-map-element>map</a></code> element ancestor.<dt><a href=dom.html#concept-element-content-model id=the-area-element:concept-element-content-model>Content model</a>:<dd><a href=dom.html#concept-content-nothing id=the-area-element:concept-content-nothing>Nothing</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-area-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>No <a href=syntax.html#syntax-end-tag id=the-area-element:syntax-end-tag>end tag</a>.<dt><a href=dom.html#concept-element-attributes id=the-area-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-area-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-area-element:attr-area-alt><a href=#attr-area-alt>alt</a></code> —  Replacement text for use when images are not available
     <dd><code id=the-area-element:attr-area-coords><a href=#attr-area-coords>coords</a></code> —  Coordinates for the shape to be created in an <a href=#image-map id=the-area-element:image-map>image map</a>
     <dd><code id=the-area-element:attr-area-shape><a href=#attr-area-shape>shape</a></code> —  The kind of shape to be created in an <a href=#image-map id=the-area-element:image-map-2>image map</a>
     <dd><code id=the-area-element:attr-hyperlink-href><a href=links.html#attr-hyperlink-href>href</a></code> —  Address of the <a id=the-area-element:hyperlink href=links.html#hyperlink>hyperlink</a>
     <dd><code id=the-area-element:attr-hyperlink-target><a href=links.html#attr-hyperlink-target>target</a></code> —  <a id=the-area-element:navigable href=document-sequences.html#navigable>Navigable</a> for <a id=the-area-element:hyperlink-2 href=links.html#hyperlink>hyperlink</a> <a href=browsing-the-web.html#navigate id=the-area-element:navigate>navigation</a>
     <dd><code id=the-area-element:attr-hyperlink-download><a href=links.html#attr-hyperlink-download>download</a></code> —  Whether to download the resource instead of navigating to it, and its filename if so
     <dd><code id=the-area-element:ping><a href=links.html#ping>ping</a></code> —  <a href=https://url.spec.whatwg.org/#concept-url id=the-area-element:url data-x-internal=url>URLs</a> to ping
     <dd><code id=the-area-element:attr-hyperlink-rel><a href=links.html#attr-hyperlink-rel>rel</a></code> —  Relationship between the location in the document containing the <a id=the-area-element:hyperlink-3 href=links.html#hyperlink>hyperlink</a> and the destination resource
     <dd><code id=the-area-element:attr-hyperlink-referrerpolicy><a href=links.html#attr-hyperlink-referrerpolicy>referrerpolicy</a></code> —  <a id=the-area-element:referrer-policy href=https://w3c.github.io/webappsec-referrer-policy/#referrer-policy data-x-internal=referrer-policy>Referrer policy</a> for <a href=https://fetch.spec.whatwg.org/#concept-fetch id=the-area-element:concept-fetch data-x-internal=concept-fetch>fetches</a> initiated by the element
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-area-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd>If the element has an <code id=the-area-element:attr-hyperlink-href-2><a href=links.html#attr-hyperlink-href>href</a></code> attribute: <a href=https://w3c.github.io/html-aria/#el-area>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-area>for implementers</a>.<dd>Otherwise: <a href=https://w3c.github.io/html-aria/#el-area-no-href>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-area-no-href>for implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-area-element:concept-element-dom>DOM interface</a>:<dd>
    <pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='htmlareaelement' data-dfn-type='interface'><c- g>HTMLAreaElement</c-></dfn> : <a id='the-area-element:htmlelement' href='dom.html#htmlelement'><c- n>HTMLElement</c-></a> {
  [<a id='the-area-element:htmlconstructor' href='dom.html#htmlconstructor'><c- g>HTMLConstructor</c-></a>] <c- g>constructor</c->();

  [<a id='the-area-element:cereactions' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-area-element:xattr-reflect'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLAreaElement' id='dom-area-alt' data-dfn-type='attribute'><c- g>alt</c-></dfn>;
  [<a id='the-area-element:cereactions-2' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-area-element:xattr-reflect-2'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLAreaElement' id='dom-area-coords' data-dfn-type='attribute'><c- g>coords</c-></dfn>;
  [<a id='the-area-element:cereactions-3' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-area-element:xattr-reflect-3'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLAreaElement' id='dom-area-shape' data-dfn-type='attribute'><c- g>shape</c-></dfn>;
  [<a id='the-area-element:cereactions-4' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-area-element:xattr-reflect-4'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLAreaElement' id='dom-area-target' data-dfn-type='attribute'><c- g>target</c-></dfn>;
  [<a id='the-area-element:cereactions-5' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-area-element:xattr-reflect-5'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLAreaElement' id='dom-area-download' data-dfn-type='attribute'><c- g>download</c-></dfn>;
  [<a id='the-area-element:cereactions-6' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-area-element:xattr-reflect-6'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>USVString</c-> <dfn data-dfn-for='HTMLAreaElement' id='dom-area-ping' data-dfn-type='attribute'><c- g>ping</c-></dfn>;
  [<a id='the-area-element:cereactions-7' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-area-element:xattr-reflect-7'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLAreaElement' id='dom-area-rel' data-dfn-type='attribute'><c- g>rel</c-></dfn>;
  [<c- g>SameObject</c->, <c- g>PutForwards</c->=<a href='https://dom.spec.whatwg.org/#dom-domtokenlist-value' id='the-area-element:dom-domtokenlist-value' data-x-internal='dom-domtokenlist-value'><c- n>value</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-area-element:xattr-reflect-8'>Reflect</a>=&quot;<a href='links.html#attr-hyperlink-rel' id='the-area-element:attr-hyperlink-rel-2'>rel</a>&quot;] <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-area-element:domtokenlist' href='https://dom.spec.whatwg.org/#interface-domtokenlist' data-x-internal='domtokenlist'><c- n>DOMTokenList</c-></a> <dfn data-dfn-for='HTMLAreaElement' id='dom-area-rellist' data-dfn-type='attribute'><c- g>relList</c-></dfn>;
  [<a id='the-area-element:cereactions-8' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-area-referrerpolicy' id='the-area-element:dom-area-referrerpolicy'><c- g>referrerPolicy</c-></a>;

  // <a href='obsolete.html#HTMLAreaElement-partial'>also has obsolete members</a>
};
<a href='#htmlareaelement' id='the-area-element:htmlareaelement'><c- n>HTMLAreaElement</c-></a> <c- b>includes</c-> <a id='the-area-element:htmlhyperlinkelementutils' href='links.html#htmlhyperlinkelementutils'><c- n>HTMLHyperlinkElementUtils</c-></a>;</code></pre>
   </dl>

  <p>The <code id=the-area-element:the-area-element><a href=#the-area-element>area</a></code> element <a id=the-area-element:represents href=dom.html#represents>represents</a> either a hyperlink with some text and a
  corresponding area on an <a href=#image-map id=the-area-element:image-map-3>image map</a>, or a dead area on an image map.</p>

  <p>An <code id=the-area-element:the-area-element-2><a href=#the-area-element>area</a></code> element with a parent node must have a <code id=the-area-element:the-map-element-2><a href=#the-map-element>map</a></code> element
  ancestor.</p>

  <p>If the <code id=the-area-element:the-area-element-3><a href=#the-area-element>area</a></code> element has an <code id=the-area-element:attr-hyperlink-href-3><a href=links.html#attr-hyperlink-href>href</a></code>
  attribute, then the <code id=the-area-element:the-area-element-4><a href=#the-area-element>area</a></code> element represents a <a id=the-area-element:hyperlink-4 href=links.html#hyperlink>hyperlink</a>. In this case,
  the <dfn data-dfn-for=area id=attr-area-alt data-dfn-type=element-attr><code>alt</code></dfn> attribute must be
  present. It specifies the text of the hyperlink. Its value must be text that, when presented with
  the texts specified for the other hyperlinks of the <a href=#image-map id=the-area-element:image-map-4>image map</a>, and with the
  alternative text of the image, but without the image itself, provides the user with the same kind
  of choice as the hyperlink would when used without its text but with its shape applied to the
  image. The <code id=the-area-element:attr-area-alt-2><a href=#attr-area-alt>alt</a></code> attribute may be left blank if there is another
  <code id=the-area-element:the-area-element-5><a href=#the-area-element>area</a></code> element in the same <a href=#image-map id=the-area-element:image-map-5>image map</a> that points to the same resource and
  has a non-blank <code id=the-area-element:attr-area-alt-3><a href=#attr-area-alt>alt</a></code> attribute.</p>

  <p>If the <code id=the-area-element:the-area-element-6><a href=#the-area-element>area</a></code> element has no <code id=the-area-element:attr-hyperlink-href-4><a href=links.html#attr-hyperlink-href>href</a></code>
  attribute, then the area represented by the element cannot be selected, and the <code id=the-area-element:attr-area-alt-4><a href=#attr-area-alt>alt</a></code> attribute must be omitted.</p>

  <p>In both cases, the <code id=the-area-element:attr-area-shape-2><a href=#attr-area-shape>shape</a></code> and <code id=the-area-element:attr-area-coords-2><a href=#attr-area-coords>coords</a></code> attributes specify the area.</p>

  <p>The <dfn data-dfn-for=area id=attr-area-shape data-dfn-type=element-attr><code>shape</code></dfn> attribute is
  an <a id=the-area-element:enumerated-attribute href=common-microsyntaxes.html#enumerated-attribute>enumerated attribute</a> with the following keywords and states:</p>

  <table class=yesno><thead><tr><th>Keyword
     <th>Conforming
     <th>State
     <th>Brief description
   <tbody><tr><td><dfn id=attr-area-shape-keyword-circle><code>circle</code></dfn>
     <td>
     <td rowspan=2><a href=#attr-area-shape-circle id=the-area-element:attr-area-shape-circle>Circle state</a>
     <td rowspan=2>Designates a circle, using exactly three integers in the <code id=the-area-element:attr-area-coords-3><a href=#attr-area-coords>coords</a></code> attribute.
    <tr><td><dfn id=attr-area-shape-keyword-circ><code>circ</code></dfn>
     <td class=no>No
    <tr><td><dfn id=attr-area-shape-keyword-default><code>default</code></dfn>
     <td>
     <td><a href=#attr-area-shape-default id=the-area-element:attr-area-shape-default>Default state</a>
     <td>This area is the whole image. (The <code id=the-area-element:attr-area-coords-4><a href=#attr-area-coords>coords</a></code>
     attribute is not used.)
    <tr><td><dfn id=attr-area-shape-keyword-poly><code>poly</code></dfn>
     <td>
     <td rowspan=2><a href=#attr-area-shape-poly id=the-area-element:attr-area-shape-poly>Polygon state</a>
     <td rowspan=2>Designates a polygon, using at-least six integers in the <code id=the-area-element:attr-area-coords-5><a href=#attr-area-coords>coords</a></code> attribute.
    <tr><td><dfn id=attr-area-shape-keyword-polygon><code>polygon</code></dfn>
     <td class=no>No
    <tr><td><dfn id=attr-area-shape-keyword-rect><code>rect</code></dfn>
     <td>
     <td rowspan=2><a href=#attr-area-shape-rect id=the-area-element:attr-area-shape-rect>Rectangle state</a>
     <td rowspan=2>Designates a rectangle, using exactly four integers in the <code id=the-area-element:attr-area-coords-6><a href=#attr-area-coords>coords</a></code> attribute.
    <tr><td><dfn id=attr-area-shape-keyword-rectangle><code>rectangle</code></dfn>
     <td class=no>No
  </table>

  <p>The attribute's <i id=the-area-element:missing-value-default><a href=common-microsyntaxes.html#missing-value-default>missing value default</a></i> and <i id=the-area-element:invalid-value-default><a href=common-microsyntaxes.html#invalid-value-default>invalid value default</a></i> are both the <a href=#attr-area-shape-rect id=the-area-element:attr-area-shape-rect-2>rectangle</a> state.</p>

  <p>The <dfn data-dfn-for=area id=attr-area-coords data-dfn-type=element-attr><code>coords</code></dfn> attribute
  must, if specified, contain a <a id=the-area-element:valid-list-of-floating-point-numbers href=common-microsyntaxes.html#valid-list-of-floating-point-numbers>valid list of floating-point numbers</a>. This attribute
  gives the coordinates for the shape described by the <code id=the-area-element:attr-area-shape-3><a href=#attr-area-shape>shape</a></code>
  attribute. The processing for this attribute is described as part of the <a href=#image-map id=the-area-element:image-map-6>image
  map</a> processing model.</p>

  

  <p>In the <dfn data-dfn-for=area/shape id=attr-area-shape-circle data-dfn-type=attr-value>circle state</dfn>,
  <code id=the-area-element:the-area-element-7><a href=#the-area-element>area</a></code> elements must have a <code id=the-area-element:attr-area-coords-7><a href=#attr-area-coords>coords</a></code> attribute
  present, with three integers, the last of which must be non-negative. The first integer must be
  the distance in <a href=https://drafts.csswg.org/css-values/#px id="the-area-element:'px'" data-x-internal="'px'">CSS pixels</a> from the left edge of the image to the
  center of the circle, the second integer must be the distance in <a href=https://drafts.csswg.org/css-values/#px id="the-area-element:'px'-2" data-x-internal="'px'">CSS
  pixels</a> from the top edge of the image to the center of the circle, and the third integer
  must be the radius of the circle, again in <a href=https://drafts.csswg.org/css-values/#px id="the-area-element:'px'-3" data-x-internal="'px'">CSS pixels</a>.</p>

  <p>In the <dfn data-dfn-for=area/shape id=attr-area-shape-default data-dfn-type=attr-value>default state</dfn>,
  <code id=the-area-element:the-area-element-8><a href=#the-area-element>area</a></code> elements must not have a <code id=the-area-element:attr-area-coords-8><a href=#attr-area-coords>coords</a></code>
  attribute. (The area is the whole image.)</p>

  <p>In the <dfn data-dfn-for=area/shape id=attr-area-shape-poly data-dfn-type=attr-value>polygon state</dfn>,
  <code id=the-area-element:the-area-element-9><a href=#the-area-element>area</a></code> elements must have a <code id=the-area-element:attr-area-coords-9><a href=#attr-area-coords>coords</a></code> attribute
  with at least six integers, and the number of integers must be even. Each pair of integers must
  represent a coordinate given as the distances from the left and the top of the image in <a href=https://drafts.csswg.org/css-values/#px id="the-area-element:'px'-4" data-x-internal="'px'">CSS pixels</a> respectively, and all the coordinates together must represent the
  points of the polygon, in order.</p>

  <p>In the <dfn data-dfn-for=area/shape id=attr-area-shape-rect data-dfn-type=attr-value>rectangle state</dfn>,
  <code id=the-area-element:the-area-element-10><a href=#the-area-element>area</a></code> elements must have a <code id=the-area-element:attr-area-coords-10><a href=#attr-area-coords>coords</a></code> attribute
  with exactly four integers, the first of which must be less than the third, and the second of
  which must be less than the fourth. The four points must represent, respectively, the distance
  from the left edge of the image to the left side of the rectangle, the distance from the top edge
  to the top side, the distance from the left edge to the right side, and the distance from the top
  edge to the bottom side, all in <a href=https://drafts.csswg.org/css-values/#px id="the-area-element:'px'-5" data-x-internal="'px'">CSS pixels</a>.</p>

  

  <p>When user agents allow users to <a href=links.html#following-hyperlinks-2 id=the-area-element:following-hyperlinks-2>follow hyperlinks</a> or
  <a href=links.html#downloading-hyperlinks id=the-area-element:downloading-hyperlinks>download hyperlinks</a> created using the
  <code id=the-area-element:the-area-element-11><a href=#the-area-element>area</a></code> element, the <code id=the-area-element:attr-hyperlink-href-5><a href=links.html#attr-hyperlink-href>href</a></code>, <code id=the-area-element:attr-hyperlink-target-2><a href=links.html#attr-hyperlink-target>target</a></code>, <code id=the-area-element:attr-hyperlink-download-2><a href=links.html#attr-hyperlink-download>download</a></code>, and <code id=the-area-element:ping-2><a href=links.html#ping>ping</a></code> attributes decide how the link is followed. The <code id=the-area-element:attr-hyperlink-rel-3><a href=links.html#attr-hyperlink-rel>rel</a></code> attribute may be used to indicate to the user the likely
  nature of the target resource before the user follows the link.</p>

  

  <p>The <code id=the-area-element:attr-hyperlink-target-3><a href=links.html#attr-hyperlink-target>target</a></code>, <code id=the-area-element:attr-hyperlink-download-3><a href=links.html#attr-hyperlink-download>download</a></code>, <code id=the-area-element:ping-3><a href=links.html#ping>ping</a></code>,
  <code id=the-area-element:attr-hyperlink-rel-4><a href=links.html#attr-hyperlink-rel>rel</a></code>, and <code id=the-area-element:attr-hyperlink-referrerpolicy-2><a href=links.html#attr-hyperlink-referrerpolicy>referrerpolicy</a></code> attributes must be omitted if the
  <code id=the-area-element:attr-hyperlink-href-6><a href=links.html#attr-hyperlink-href>href</a></code> attribute is not present.</p>

  <p>If the <code id=the-area-element:names:-the-itemprop-attribute><a href=microdata.html#names:-the-itemprop-attribute>itemprop</a></code> attribute is specified on an
  <code id=the-area-element:the-area-element-12><a href=#the-area-element>area</a></code> element, then the <code id=the-area-element:attr-hyperlink-href-7><a href=links.html#attr-hyperlink-href>href</a></code> attribute must
  also be specified.</p>

  

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLAreaElement/referrerPolicy title="The HTMLAreaElement.referrerPolicy property reflect the HTML referrerpolicy attribute of the <area> element defining which referrer is sent when fetching the resource.">HTMLAreaElement/referrerPolicy</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>50+</span></span><span class="safari yes"><span>Safari</span><span>14.1+</span></span><span class="chrome yes"><span>Chrome</span><span>52+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The IDL attribute <dfn data-dfn-for=HTMLAreaElement id=dom-area-referrerpolicy data-dfn-type=attribute><code>referrerPolicy</code></dfn> must <a id=the-area-element:reflect href=common-dom-interfaces.html#reflect>reflect</a> the <code id=the-area-element:attr-hyperlink-referrerpolicy-3><a href=links.html#attr-hyperlink-referrerpolicy>referrerpolicy</a></code> content attribute, <a id=the-area-element:limited-to-only-known-values href=common-dom-interfaces.html#limited-to-only-known-values>limited to
  only known values</a>.</p>

  



  <h4 id=image-maps><span class=secno>4.8.14</span> Image maps<a href=#image-maps class=self-link></a></h4>

  

  

  <h5 id=authoring><span class=secno>4.8.14.1</span> Authoring<a href=#authoring class=self-link></a></h5>

  

  <p>An <dfn id=image-map>image map</dfn> allows geometric areas on an image to be associated with <a href=links.html#hyperlink id=authoring:hyperlink>hyperlinks</a>.</p>

  <p>An image, in the form of an <code id=authoring:the-img-element><a href=embedded-content.html#the-img-element>img</a></code> element, may be associated with an image map (in
  the form of a <code id=authoring:the-map-element><a href=#the-map-element>map</a></code> element) by specifying a <dfn data-dfn-for=img id=attr-hyperlink-usemap data-dfn-type=element-attr><code>usemap</code></dfn> attribute on the <code id=authoring:the-img-element-2><a href=embedded-content.html#the-img-element>img</a></code> element. The
  <code id=authoring:attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code> attribute, if specified, must be a <a id=authoring:valid-hash-name-reference href=common-microsyntaxes.html#valid-hash-name-reference>valid
  hash-name reference</a> to a <code id=authoring:the-map-element-2><a href=#the-map-element>map</a></code> element.</p>

  <div class=example>

   <p>Consider an image that looks as follows:</p>

   <p><img src=../images/sample-usemap.png width=600 alt="A line with four shapes in it, equally spaced: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star." height=150></p>

   <p>If we wanted just the colored areas to be clickable, we could do it as follows:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->
 Please select a shape:
 <c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;shapes.png&quot;</c-> <c- e>usemap</c-><c- o>=</c-><c- s>&quot;#shapes&quot;</c->
      <c- e>alt</c-><c- o>=</c-><c- s>&quot;Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star.&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>map</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;shapes&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>area</c-> <c- e>shape</c-><c- o>=</c-><c- s>rect</c-> <c- e>coords</c-><c- o>=</c-><c- s>&quot;50,50,100,100&quot;</c-><c- p>&gt;</c-> <c- c>&lt;!-- the hole in the red box --&gt;</c->
  <c- p>&lt;</c-><c- f>area</c-> <c- e>shape</c-><c- o>=</c-><c- s>rect</c-> <c- e>coords</c-><c- o>=</c-><c- s>&quot;25,25,125,125&quot;</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;red.html&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;Red box.&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>area</c-> <c- e>shape</c-><c- o>=</c-><c- s>circle</c-> <c- e>coords</c-><c- o>=</c-><c- s>&quot;200,75,50&quot;</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;green.html&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;Green circle.&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>area</c-> <c- e>shape</c-><c- o>=</c-><c- s>poly</c-> <c- e>coords</c-><c- o>=</c-><c- s>&quot;325,25,262,125,388,125&quot;</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;blue.html&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;Blue triangle.&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>area</c-> <c- e>shape</c-><c- o>=</c-><c- s>poly</c-> <c- e>coords</c-><c- o>=</c-><c- s>&quot;450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60&quot;</c->
        <c- e>href</c-><c- o>=</c-><c- s>&quot;yellow.html&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;Yellow star.&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>map</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

  </div>

  

  <h5 id=image-map-processing-model><span class=secno>4.8.14.2</span> <span id=processing-model></span>Processing model<a href=#image-map-processing-model class=self-link></a></h5>

  <p>If an <code id=image-map-processing-model:the-img-element><a href=embedded-content.html#the-img-element>img</a></code> element has a <code id=image-map-processing-model:attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code>
  attribute specified, user agents must process it as follows:</p>

  <ol><li><p>Parse the attribute's value using the <a id=image-map-processing-model:rules-for-parsing-a-hash-name-reference href=common-microsyntaxes.html#rules-for-parsing-a-hash-name-reference>rules for parsing a hash-name reference</a>
   to a <code id=image-map-processing-model:the-map-element><a href=#the-map-element>map</a></code> element, with the element as the context node. This will return either an
   element (the <var>map</var>) or null.<li><p>If that returned null, then return. The image is not associated with an image
   map after all.<li><p>Otherwise, the user agent must collect all the <code id=image-map-processing-model:the-area-element><a href=#the-area-element>area</a></code> elements that are
   descendants of the <var>map</var>. Let <var>areas</var> be that list.</ol>

  <p>Having obtained the list of <code id=image-map-processing-model:the-area-element-2><a href=#the-area-element>area</a></code> elements that form the image map (the <var>areas</var>), interactive user agents must process the list in one of two ways.</p>

  <p>If the user agent intends to show the text that the <code id=image-map-processing-model:the-img-element-2><a href=embedded-content.html#the-img-element>img</a></code> element represents, then
  it must use the following steps:</p>

  <ol><li><p>Remove all the <code id=image-map-processing-model:the-area-element-3><a href=#the-area-element>area</a></code> elements in <var>areas</var> that have no <code id=image-map-processing-model:attr-hyperlink-href><a href=links.html#attr-hyperlink-href>href</a></code> attribute.<li><p>Remove all the <code id=image-map-processing-model:the-area-element-4><a href=#the-area-element>area</a></code> elements in <var>areas</var> that have no <code id=image-map-processing-model:attr-area-alt><a href=#attr-area-alt>alt</a></code> attribute, or whose <code id=image-map-processing-model:attr-area-alt-2><a href=#attr-area-alt>alt</a></code>
   attribute's value is the empty string, <em>if</em> there is another <code id=image-map-processing-model:the-area-element-5><a href=#the-area-element>area</a></code> element in
   <var>areas</var> with the same value in the <code id=image-map-processing-model:attr-hyperlink-href-2><a href=links.html#attr-hyperlink-href>href</a></code> attribute and with a non-empty <code id=image-map-processing-model:attr-area-alt-3><a href=#attr-area-alt>alt</a></code> attribute.<li><p>Each remaining <code id=image-map-processing-model:the-area-element-6><a href=#the-area-element>area</a></code> element in <var>areas</var> represents a
   <a id=image-map-processing-model:hyperlink href=links.html#hyperlink>hyperlink</a>. Those hyperlinks should all be made available to the user in a manner
   associated with the text of the <code id=image-map-processing-model:the-img-element-3><a href=embedded-content.html#the-img-element>img</a></code>.</p>

   <p>In this context, user agents may represent <code id=image-map-processing-model:the-area-element-7><a href=#the-area-element>area</a></code> and <code id=image-map-processing-model:the-img-element-4><a href=embedded-content.html#the-img-element>img</a></code> elements
   with no specified <code>alt</code> attributes, or whose <code>alt</code>
   attributes are the empty string or some other non-visible text, in an
   <a id=image-map-processing-model:implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> fashion intended to indicate the lack of suitable
   author-provided text.</ol>

  <p>If the user agent intends to show the image and allow interaction with the image to select
  hyperlinks, then the image must be associated with a set of layered shapes, taken from the
  <code id=image-map-processing-model:the-area-element-8><a href=#the-area-element>area</a></code> elements in <var>areas</var>, in reverse <a id=image-map-processing-model:tree-order href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a> (so the last
  specified <code id=image-map-processing-model:the-area-element-9><a href=#the-area-element>area</a></code> element in the <var>map</var> is the bottom-most shape, and
  the first element in the <var>map</var>, in <a id=image-map-processing-model:tree-order-2 href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>, is the top-most shape).</p>

  <p>Each <code id=image-map-processing-model:the-area-element-10><a href=#the-area-element>area</a></code> element in <var>areas</var> must be processed as follows to
  obtain a shape to layer onto the image:</p>

  <ol><li><p>Find the state that the element's <code id=image-map-processing-model:attr-area-shape><a href=#attr-area-shape>shape</a></code> attribute
   represents.<li><p>Use the <a id=image-map-processing-model:rules-for-parsing-a-list-of-floating-point-numbers href=common-microsyntaxes.html#rules-for-parsing-a-list-of-floating-point-numbers>rules for parsing a list of floating-point numbers</a> to parse the
   element's <code id=image-map-processing-model:attr-area-coords><a href=#attr-area-coords>coords</a></code> attribute, if it is present, and let the
   <var>coords</var> list be the result. If the attribute is absent, let the <var>coords</var> list
   be the empty list.<li>
    <p>If the number of items in the <var>coords</var> list is less than the minimum number
    given for the <code id=image-map-processing-model:the-area-element-11><a href=#the-area-element>area</a></code> element's current state, as per the following table, then the
    shape is empty; return.</p>

    <table><thead><tr><th>State
       <th>Minimum number of items
     <tbody><tr><td><a href=#attr-area-shape-circle id=image-map-processing-model:attr-area-shape-circle>Circle state</a>
       <td>3
      <tr><td><a href=#attr-area-shape-default id=image-map-processing-model:attr-area-shape-default>Default state</a>
       <td>0
      <tr><td><a href=#attr-area-shape-poly id=image-map-processing-model:attr-area-shape-poly>Polygon state</a>
       <td>6
      <tr><td><a href=#attr-area-shape-rect id=image-map-processing-model:attr-area-shape-rect>Rectangle state</a>
       <td>4
    </table>
   <li>
    <p>Check for excess items in the <var>coords</var> list as per the entry in the
    following list corresponding to the <code id=image-map-processing-model:attr-area-shape-2><a href=#attr-area-shape>shape</a></code> attribute's
    state:</p>

    <dl class=switch><dt><a href=#attr-area-shape-circle id=image-map-processing-model:attr-area-shape-circle-2>Circle state</a><dd>Drop any items in the list beyond the third.<dt><a href=#attr-area-shape-default id=image-map-processing-model:attr-area-shape-default-2>Default state</a><dd>Drop all items in the list.<dt><a href=#attr-area-shape-poly id=image-map-processing-model:attr-area-shape-poly-2>Polygon state</a><dd>Drop the last item if there's an odd number of items.<dt><a href=#attr-area-shape-rect id=image-map-processing-model:attr-area-shape-rect-2>Rectangle state</a><dd>Drop any items in the list beyond the fourth.</dl>
   <li><p>If the <code id=image-map-processing-model:attr-area-shape-3><a href=#attr-area-shape>shape</a></code> attribute represents the <a href=#attr-area-shape-rect id=image-map-processing-model:attr-area-shape-rect-3>rectangle state</a>, and the first number in the list is
   numerically greater than the third number in the list, then swap those two numbers around.<li><p>If the <code id=image-map-processing-model:attr-area-shape-4><a href=#attr-area-shape>shape</a></code> attribute represents the <a href=#attr-area-shape-rect id=image-map-processing-model:attr-area-shape-rect-4>rectangle state</a>, and the second number in the list is
   numerically greater than the fourth number in the list, then swap those two numbers around.<li><p>If the <code id=image-map-processing-model:attr-area-shape-5><a href=#attr-area-shape>shape</a></code> attribute represents the <a href=#attr-area-shape-circle id=image-map-processing-model:attr-area-shape-circle-3>circle state</a>, and the third number in the list is less than
   or equal to zero, then the shape is empty; return.<li><p>Now, the shape represented by the element is the one described for the entry in the list
   below corresponding to the state of the <code id=image-map-processing-model:attr-area-shape-6><a href=#attr-area-shape>shape</a></code> attribute:</p>

    <dl class=switch><dt><a href=#attr-area-shape-circle id=image-map-processing-model:attr-area-shape-circle-4>Circle state</a><dd>
      <p>Let <var>x</var> be the first number in <var>coords</var>, <var>y</var> be the second number, and <var>r</var> be the third number.</p>

      <p>The shape is a circle whose center is <var>x</var> <a href=https://drafts.csswg.org/css-values/#px id="image-map-processing-model:'px'" data-x-internal="'px'">CSS pixels</a>
      from the left edge of the image and <var>y</var> <a href=https://drafts.csswg.org/css-values/#px id="image-map-processing-model:'px'-2" data-x-internal="'px'">CSS pixels</a> from
      the top edge of the image, and whose radius is <var>r</var> <a href=https://drafts.csswg.org/css-values/#px id="image-map-processing-model:'px'-3" data-x-internal="'px'">CSS
      pixels</a>.</p>
     <dt><a href=#attr-area-shape-default id=image-map-processing-model:attr-area-shape-default-3>Default state</a><dd>
      <p>The shape is a rectangle that exactly covers the entire image.</p>
     <dt><a href=#attr-area-shape-poly id=image-map-processing-model:attr-area-shape-poly-3>Polygon state</a><dd>
      <p>Let <var>x<sub><var>i</var></sub></var> be the <span>(2<var>i</var>)</span>th entry in <var>coords</var>, and <var>y<sub><var>i</var></sub></var> be the <span>(2<var>i</var>+1)</span>th entry in <var>coords</var> (the first entry in <var>coords</var> being the one with index 0).</p>

      <p>Let <var>the coordinates</var> be (<var>x<sub><var>i</var></sub></var>, <var>y<sub><var>i</var></sub></var>),
      interpreted in <a href=https://drafts.csswg.org/css-values/#px id="image-map-processing-model:'px'-4" data-x-internal="'px'">CSS pixels</a> measured from the top left of the image,
      for all integer values of <var>i</var> from 0 to <span>(<var>N</var>/2)-1</span>,
      where <var>N</var> is the number of items in <var>coords</var>.</p>

      <p>The shape is a polygon whose vertices are given by <var>the coordinates</var>, and whose
      interior is established using the even-odd rule. <a href=references.html#refsGRAPHICS>[GRAPHICS]</a></p>

      
     <dt><a href=#attr-area-shape-rect id=image-map-processing-model:attr-area-shape-rect-5>Rectangle state</a><dd>
      <p>Let <var>x<sub>1</sub></var> be the first number in <var>coords</var>, <var>y<sub>1</sub></var> be the second number, <var>x<sub>2</sub></var> be the third number, and <var>y<sub>2</sub></var> be the fourth number.</p>

      <p>The shape is a rectangle whose top-left corner is given by the coordinate (<var>x<sub>1</sub></var>, <var>y<sub>1</sub></var>) and whose
      bottom right corner is given by the coordinate (<var>x<sub>2</sub></var>,
      <var>y<sub>2</sub></var>), those coordinates being interpreted as <a href=https://drafts.csswg.org/css-values/#px id="image-map-processing-model:'px'-5" data-x-internal="'px'">CSS
      pixels</a> from the top left corner of the image.</p>
     </dl>

    <p>For historical reasons, the coordinates must be interpreted relative to the
    <em>displayed</em> image after any stretching caused by the CSS <a id="image-map-processing-model:'width'" href=https://drafts.csswg.org/css2/#the-width-property data-x-internal="'width'">'width'</a> and
    <a id="image-map-processing-model:'height'" href=https://drafts.csswg.org/css2/#the-height-property data-x-internal="'height'">'height'</a> properties (or, for non-CSS browsers, the image element's <code>width</code> and <code>height</code> attributes — CSS browsers map
    those attributes to the aforementioned CSS properties).</p>

    <p class=note>Browser zoom features and transforms applied using CSS or SVG do not affect the
    coordinates.</p>
   </ol>

  <p>Pointing device interaction with an image associated with a set of layered shapes per the above
  algorithm must result in the relevant user interaction events being first fired to the top-most
  shape covering the point that the pointing device indicated, if any, or to the image element
  itself, if there is no shape covering that point. User agents may also allow individual
  <code id=image-map-processing-model:the-area-element-12><a href=#the-area-element>area</a></code> elements representing <a href=links.html#hyperlink id=image-map-processing-model:hyperlink-2>hyperlinks</a> to be selected
  and activated (e.g. using a keyboard).</p>

  <p class=note>Because a <code id=image-map-processing-model:the-map-element-2><a href=#the-map-element>map</a></code> element (and its <code id=image-map-processing-model:the-area-element-13><a href=#the-area-element>area</a></code> elements) can be
  associated with multiple <code id=image-map-processing-model:the-img-element-5><a href=embedded-content.html#the-img-element>img</a></code> elements, it is possible for an <code id=image-map-processing-model:the-area-element-14><a href=#the-area-element>area</a></code>
  element to correspond to multiple <i id=image-map-processing-model:focusable-area><a href=interaction.html#focusable-area>focusable areas</a></i> of the
  document.</p>

  <p>Image maps are <a id=image-map-processing-model:live href=infrastructure.html#live>live</a>; if the DOM is mutated, then the user agent must act as if it
  had rerun the algorithms for image maps.</p>

  



  <nav><a href=media.html>← 4.8.8 The video element</a> — <a href=index.html>Table of Contents</a> — <a href=embedded-content-other.html>4.8.15 MathML →</a></nav>
